<template>
    <div class="business">
        <img class="head-bg" src="@/assets/business/bg.jpg">
        <Title class="b20" title="入驻专享" detail="Exclusive access"></Title>
        <div class="list-data">
            <div class="item" v-for="(item, index) in listData" :key="index">
                <img :src="item.img" :alt="item.title">
                <span class="title bold f14">{{ item.title }}</span>
                <div class="detail f12">
                    <span>{{ item.detail }}</span>
                </div>
            </div>
        </div>
        <Title class="b20" title="商家服务" detail="Business services"></Title>
        <img src="@/assets/business/new-business.jpg" class="goods-service">
        <Title class="b20" title="立即报名申请入驻"></Title>
        <div class="submit-info">
            <div class="item">
                <img src="@/assets/business/person.png" alt="">
                <input type="text" placeholder="姓名" v-model="name">
            </div>
            <div class="item">
                <img src="@/assets/business/phone.png" alt="">
                <input type="tel" maxlength="11" placeholder="联系电话" v-model="phone">
            </div>
            <div class="item">
                <img src="@/assets/business/city.png" alt="">
                <input type="text" placeholder="所在地区" v-model="city">
            </div>
            <div class="item">
                <img src="@/assets/business/goods.png" alt="">
                <input type="text" placeholder="主要商品名称" v-model="goodsName">
            </div>
            <div class="submit">
                申请入驻
            </div>
        </div>

    </div>
</template>
<script>
import listData from "@/common/business";
import Title from '@/components/Business/Title.vue';
export default {
    name: "Business",
    components: {
        Title
    },
    data() {
        return {
            listData,
            name: "",
            phone: "",
            city: "",
            goodsName: "",
        }
    },
}
</script>
<style lang="scss" scoped>
.b20 {
    margin-bottom: 20px;
}

.business {

    .head-bg,
    .goods-service {
        width: 100%;
    }

    .list-data {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        .item {
            background-color: #fff7f5;
            margin-bottom: 5px;
            width: 121.666px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px 0;

            &:nth-of-type(2),
            &:nth-of-type(5) {
                margin: 0 5px;
                margin-bottom: 5px;
            }

            img {
                width: 50%;
                object-fit: contain;
            }

            .title {
                margin-top: 10px;
                margin-bottom: 5px;
            }

            .detail {
                span {
                    transform: scale(.8);
                    white-space: nowrap;
                }
            }
        }
    }

    .submit-info {
        display: flex;
        flex-direction: column;
        align-items: center;

        .item {
            width: 300px;
            height: 55px;
            border-radius: 25px;
            background-color: #f4f4f4;
            display: flex;
            padding: 15px;
            margin-bottom: 10px;

            img {
                width: 25px;
                object-fit: contain;
            }

            input {
                border: 0;
                outline: 0;
                margin-left: 15px;
                background-color: transparent;
            }
        }

        .submit {
            width: 300px;
            height: 55px;
            border-radius: 25px;
            background-color: #f19762;
            line-height: 55px;
            text-align: center;
            letter-spacing: 2px;
            color: white;
        }
    }

    padding-bottom: 10px;
}
</style>